<template>
  <div>
    <a-modal
      v-model:open="visible1"
      width="820px"
      title="批量添加指定区域"
      :footer="null"
      :maskClosable="false"
      @cancel="cancel"
    >
      <div style="display: flex; justify-content: end">
        <span class="pointer" @click="checkAll(true)">全选</span>
        <span class="pointer" @click="checkAll(false)"
          >&nbsp;&nbsp;清空&nbsp;&nbsp;&nbsp;</span
        >
      </div>
      <div style="display: flex; flex-wrap: wrap">
        <div
          v-for="(item, index) in district"
          style="width: 190px; margin-bottom: 10px; cursor: pointer"
        >
          <a-checkbox
            v-model:checked="item.checked"
            :indeterminate="item.indeterminate"
            @change="changeCheckbox($event, item, 'province')"
          ></a-checkbox
          >&nbsp;&nbsp;<span @click="business('province', item, index)">
            {{ item.name }}&nbsp;<span style="color: red">
              ({{ item.num || 0 }}/{{ item.children.length }})
            </span>
          </span>
        </div>
      </div>
      <div style="display: flex; justify-content: end; margin-top: 10px">
        <div class="commonBtn-primary" @click="confirm">确定</div>
      </div>
    </a-modal>
    <a-modal
      v-model:open="visible"
      width="500px"
      :title="title"
      :maskClosable="false"
      :footer="null"
    >
      <div style="display: flex; flex-wrap: wrap">
        <div
          v-for="item in cityList"
          style="width: 220px; margin-bottom: 10px; cursor: pointer"
        >
          <a-tooltip placement="bottom" color="#fff">
            <template #title>
              <div style="padding: 20px">
                <div
                  v-for="text in item.children"
                  style="margin-bottom: 10px; cursor: pointer"
                >
                  <a-checkbox
                    v-model:checked="text.checked"
                    @change="changeCheckbox($event, text, 'county', item)"
                    ><span style="color: #000">{{
                      text.name
                    }}</span></a-checkbox
                  >
                </div>
              </div>
            </template>
            <a-checkbox
              v-model:checked="item.checked"
              :indeterminate="item.indeterminate"
              @change="changeCheckbox($event, item, 'cityList')"
            ></a-checkbox
            >&nbsp;&nbsp;{{ item.name }}&nbsp;<span style="color: red">
              ({{ item.num || 0 }}/{{ item.children.length || 0 }})
            </span>
          </a-tooltip>
        </div>
      </div>
      <div style="display: flex; justify-content: end; margin-top: 10px">
        <div class="commonBtn-primary" @click="visible = false">确定</div>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import {ref, computed} from "vue";
import city from "@/utils/city";
import {message} from "ant-design-vue";

//全部操作
const checkAll = (type) => {
  if (type) {
    //全选
    district.value.forEach((item) => {
      item.num = item.children.length;
      item.indeterminate = false;
      item.checked = true;
      item.children.forEach((v) => {
        v.checked = true;
        v.indeterminate = false;
        v.children.forEach((i) => {
          i.checked = true;
        });
      });
    });
    gatherList.value = [];
    district.value.forEach((item) => {
      gatherList.value.push({
        name: item.name, //名字
        code: item.code, //编号
        childrenNum: item.children.length, //子集数量
        children: format2(item.children, true)
      });
    });
  } else {
    //清空
    gatherList.value = [];
    district.value = JSON.parse(JSON.stringify(city));
  }
};
const emits = defineEmits(["ok"]);
//省级数据
const district: any = ref();
district.value = JSON.parse(JSON.stringify(city));
//市级数据
const cityList: any = ref();
//当前操作的省级code
const provincialCode = ref();
//当前操作的省级name
const provincialName = ref();
//当前操作的省级的子集
const provincialNum = ref();
//当前操作的省级的下标
const provincialIndex = ref();
const gatherList = ref<any>([]);
const title = ref("");
const visible = ref(false);
const visible1 = ref(false);
const confirm = () => {
  if (gatherList.value.length > 0) {
    emits("ok", gatherList.value);
    setTimeout(() => {
      gatherList.value = [];
      district.value = JSON.parse(JSON.stringify(city));
    }, 200);
    visible1.value = false;
  } else {
    message.error("请选择指定地区");
  }
};
const cancel = () => {
  setTimeout(() => {
    gatherList.value = [];
    district.value = JSON.parse(JSON.stringify(city));
  }, 200);
  visible1.value = false;
};
//选择复选框
const changeCheckbox = (e: any, data: any, type: string, cityItem?: any) => {
  if (e.target.checked) {
    //选中
    if (type == "province") {
      //操作省份
      data.num = data.children.length;
      data.indeterminate = false;
      data.children.forEach((item) => {
        item.checked = true;
        item.indeterminate = false;
        item.children.forEach((i) => {
          i.checked = true;
        });
      });
      let flagea = false;
      let indexa;
      //判断是否已经有
      gatherList.value.forEach((item, index) => {
        if (item.code == data.code) {
          flagea = true;
          indexa = index;
        }
      });
      if (flagea) {
        gatherList.value[indexa] = {
          name: data.name, //名字
          code: data.code, //编号
          childrenNum: data.children.length, //子集数量
          children: format(JSON.parse(JSON.stringify(data.children)), true)
        };
      } else {
        gatherList.value.push({
          name: data.name, //名字
          code: data.code, //编号
          childrenNum: data.children.length, //子集数量
          children: format(JSON.parse(JSON.stringify(data.children)), true)
        });
      }
    } else if (type == "cityList") {
      //操作市级
      data.indeterminate = false;
      data.num = data.children.length;
      data.children.forEach((item) => {
        item.checked = true;
      });
      //判断是否已经添加过父级
      let flag = false;
      let i;
      gatherList.value.forEach((item, index) => {
        if (item.code == provincialCode.value) {
          flag = true;
          i = index;
        }
      });
      if (flag) {
        let flagea = false;
        let indexa;
        //判断是否已经有
        gatherList.value[i].children.forEach((item, index) => {
          if (item.code == data.code) {
            flagea = true;
            indexa = index;
          }
        });
        if (flagea) {
          gatherList.value[i].children[indexa] = {
            name: data.name, //名字
            code: data.code, //编号
            childrenNum: data.children.length, //子集数量
            children: format(data.children, false) //子集
          };
        } else {
          gatherList.value[i].children.push({
            name: data.name, //名字
            code: data.code, //编号
            childrenNum: data.children.length, //子集数量
            children: format(data.children, false) //子集
          });
        }
      } else {
        gatherList.value.push({
          name: provincialName.value, //名字
          code: provincialCode.value, //编号
          childrenNum: provincialNum.value, //子集数量
          children: [
            {
              name: data.name, //名字
              code: data.code, //编号
              childrenNum: data.children.length, //子集数量
              children: format(data.children, false) //子集
            }
          ]
        });
      }
      //判断省份下的市级是否全选
      let num = 0;
      district.value[provincialIndex.value].children.forEach((item) => {
        if (item.checked) {
          num++;
        }
      });
      if (num == 0) {
        district.value[provincialIndex.value].checked = false;
        district.value[provincialIndex.value].indeterminate = false;
      } else if (num == provincialNum.value) {
        district.value[provincialIndex.value].checked = true;
        district.value[provincialIndex.value].indeterminate = false;
      } else {
        district.value[provincialIndex.value].indeterminate = true;
        district.value[provincialIndex.value].checked = false;
      }
      district.value[provincialIndex.value].num = num;
    } else if (type == "county") {
      //区县
      let flag = false; //是否已有父级的省份
      let flag1 = false; //是否已经有父级的市
      let i; //父级省份的下标
      let i1; //父级市的下标
      gatherList.value.forEach((item, index) => {
        if (item.code == provincialCode.value) {
          flag = true;
          i = index;
          gatherList.value[i].children.forEach((v, a) => {
            if (v.code == cityItem.code) {
              flag1 = true;
              i1 = a;
            }
          });
        }
      });
      if (flag) {
        if (flag1) {
          gatherList.value[i].children[i1].children.push({
            name: data.name, //名字
            code: data.code //编号
          });
        } else {
          gatherList.value[i].children.push({
            name: cityItem.name, //名字
            code: cityItem.code, //编号
            childrenNum: cityItem.children.length, //子集数量
            children: [
              {
                name: data.name, //名字
                code: data.code //编号
              }
            ]
          });
        }
      } else {
        gatherList.value.push({
          name: provincialName.value, //名字
          code: provincialCode.value, //编号
          childrenNum: provincialNum.value, //子集数量
          children: [
            {
              name: cityItem.name, //名字
              code: cityItem.code, //编号
              childrenNum: cityItem.children.length, //子集数量
              children: [
                {
                  name: data.name, //名字
                  code: data.code //编号
                }
              ]
            }
          ]
        });
      }
      //判断市级下面的区是否全选
      let num = 0;
      cityItem.children.forEach((item) => {
        if (item.checked) {
          num++;
        }
      });
      if (num == 0) {
        cityItem.checked = false;
        cityItem.indeterminate = false;
      } else if (num == cityItem.children.length) {
        cityItem.checked = true;
        cityItem.indeterminate = false;
      } else {
        cityItem.indeterminate = true;
        cityItem.checked = false;
      }
      cityItem.num = num;
      //判断省份下的市级是否全选
      let num1 = 0;
      let indeterminateNum = 0;
      district.value[provincialIndex.value].children.forEach((item) => {
        if (item.checked) {
          num1++;
        }
        if (item.indeterminate) {
          indeterminateNum++;
        }
      });
      if (num1 == 0) {
        district.value[provincialIndex.value].checked = false;
        district.value[provincialIndex.value].indeterminate = false;
      } else if (num1 == provincialNum.value) {
        district.value[provincialIndex.value].checked = true;
        district.value[provincialIndex.value].indeterminate = false;
      } else {
        district.value[provincialIndex.value].checked = false;
        district.value[provincialIndex.value].indeterminate = true;
      }
      if (indeterminateNum != 0) {
        district.value[provincialIndex.value].indeterminate = true;
      }
      district.value[provincialIndex.value].num = num1;
    }
  } else {
    //取消
    if (type == "province") {
      //操作省份
      data.num = 0;
      let index;
      let gatherListData = JSON.parse(JSON.stringify(gatherList.value));
      for (let i = 0; i < gatherListData.length; i++) {
        if (gatherListData[i].code == data.code) {
          index = i;
          break;
        }
      }
      data.indeterminate = false;
      data.children.forEach((item) => {
        item.checked = false;
        item.indeterminate = false;
        item.children.forEach((i) => {
          i.checked = false;
        });
      });
      gatherList.value.splice(index, 1);
    } else if (type == "cityList") {
      //操作市级
      data.num = 0;
      data.indeterminate = false;
      data.children.forEach((item) => {
        item.checked = false;
      });
      let i; //省下标
      let i1; //市下标
      gatherList.value.forEach((v, index) => {
        if (v.code == provincialCode.value) {
          i = index;
          v.children.forEach((item, a) => {
            if (item.code == data.code) {
              i1 = a;
            }
          });
        }
      });
      gatherList.value[i].children.splice(i1, 1);
      //判断省份下的市级是否全选
      let num = 0;
      let indeterminateNum = 0;
      district.value[provincialIndex.value].children.forEach((item) => {
        if (item.checked) {
          num++;
        }
        if (item.indeterminate) {
          indeterminateNum++;
        }
      });
      if (num == 0) {
        district.value[provincialIndex.value].checked = false;
        district.value[provincialIndex.value].indeterminate = false;
      } else if (num == provincialNum.value) {
        district.value[provincialIndex.value].checked = true;
        district.value[provincialIndex.value].indeterminate = false;
      } else {
        district.value[provincialIndex.value].indeterminate = true;
        district.value[provincialIndex.value].checked = false;
      }
      if (indeterminateNum != 0) {
        district.value[provincialIndex.value].indeterminate = true;
      }
      if (num == 0 && indeterminateNum == 0) {
        gatherList.value.splice(i, 1); //市级取消完删除省级
      }
      district.value[provincialIndex.value].num = num;
    } else if (type == "county") {
      //区县
      let i; //父级省份的下标
      let i1; //父级市的下标
      let i2; //区级的下标
      let gatherStr = JSON.parse(JSON.stringify(gatherList.value));
      gatherStr.forEach((item, index) => {
        if (item.code == provincialCode.value) {
          i = index;
          gatherStr[i].children.forEach((v, a) => {
            if (v.code == cityItem.code) {
              i1 = a;
              gatherStr[i].children[i1].children.forEach((v1, a1) => {
                if (v1.code == data.code) {
                  i2 = a1;
                }
              });
            }
          });
        }
      });
      try {
        gatherList.value[i].children[i1].children.splice(i2, 1);
      } catch {}
      //判断市级下面的区是否全选
      let num = 0;
      cityItem.children.forEach((item) => {
        if (item.checked) {
          num++;
        }
      });
      if (num == 0) {
        cityItem.checked = false;
        cityItem.indeterminate = false;
      } else if (num == cityItem.children.length) {
        cityItem.checked = true;
        cityItem.indeterminate = false;
      } else {
        cityItem.indeterminate = true;
        cityItem.checked = false;
      }
      cityItem.num = num;
      //判断省份下的市级是否全选
      let num1 = 0;
      let indeterminateNum = 0;
      district.value[provincialIndex.value].children.forEach((item) => {
        if (item.checked) {
          num1++;
        }
        if (item.indeterminate) {
          indeterminateNum++;
        }
      });
      if (num1 == 0) {
        district.value[provincialIndex.value].checked = false;
        district.value[provincialIndex.value].indeterminate = false;
      } else if (num1 == provincialNum.value) {
        district.value[provincialIndex.value].checked = true;
        district.value[provincialIndex.value].indeterminate = false;
      } else {
        district.value[provincialIndex.value].indeterminate = true;
        district.value[provincialIndex.value].checked = false;
      }
      if (indeterminateNum != 0) {
        district.value[provincialIndex.value].indeterminate = true;
      }
      if (indeterminateNum == 0 && num1 == 0) {
        //区级取消完删除父级省
        try {
          gatherList.value.splice(i, 1);
        } catch {}
      }
      district.value[provincialIndex.value].num = num1;
    }
  }
};
const format = (list, flag) => {
  let list1: any = []; //格式化后的数据
  list.forEach((item) => {
    if (item.children && flag) {
      list1.push({
        name: item.name, //名字
        code: item.code, //编号
        childrenNum: item.children.length, //子集数量
        children: item.children
      });
    } else {
      list1.push({
        name: item.name, //名字
        code: item.code, //编号
        children: item.children
      });
    }
  });
  return list1;
};

const format2 = (list, flag) => {
  let list1: any = []; //格式化后的数据
  list.forEach((item) => {
    if (item.children && flag) {
      list1.push({
        name: item.name, //名字
        code: item.code, //编号
        childrenNum: item.children.length, //子集数量
        children: format2(item.children, false)
      });
    } else {
      list1.push({
        name: item.name, //名字
        code: item.code, //编号
        children: item.children
      });
    }
  });
  return list1;
};
//显示弹窗
const business = (type: string, data: any, index: number) => {
  if (type == "province") {
    //显示市级的弹窗
    title.value = data.name;
    cityList.value = data.children;
    visible.value = true;
    provincialCode.value = data.code;
    provincialName.value = data.name;
    provincialNum.value = data.children.length;
    provincialIndex.value = index;
    if (data.checked && !data.indeterminate) {
      cityList.value.forEach((value) => {
        value.num = value.children.length;
      });
    } else if (!data.checked && !data.indeterminate) {
      cityList.value.forEach((value) => {
        value.num = 0;
      });
    }
  }
};
defineExpose({
  visible1
});
</script>
<style lang="less" scoped></style>
